<template>
    <div class="goods-container">

        <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
            <div class="ball" v-if="ballFlag" ref="ball"></div>
        </transition>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <Swipe :carouselList="Lunbo"></Swipe>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">{{ goodsInfo.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <!-- 在card布局中里面的元素推荐使用p进行包裹，因为其为p中的元素设置了属性和样式 -->
                    <p class="price">
                        市场价: <span class="old">￥{{ goodsInfo.market_price }}</span>
                        销售价: <span class="sell">￥{{ goodsInfo.sell_price }}</span>
                    </p>
                    <p>
                        购买数量:
                        <Numbox @getcountNum="getCount" :maxNum=" goodsInfo.stock_quantity"></Numbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ goodsInfo.goods_no }}</p>
                    <p>库存情况： {{ goodsInfo.stock_quantity }}件</p>
                    <p>上架时间：{{ goodsInfo.add_time | dateFormat }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Swipe from '../subcomponent/Swipe.vue'
    import Numbox from '../subcomponent/GoodsInfo_Numbox.vue'

    export default {
        name: "GoodsInfo",
        data() {
            return {
                id: this.$route.params.id, //获取URL中的参数使用的是$route
                Lunbo: [],
                goodsInfo: {},
                ballFlag: false,
                countNum: 1
            }
        },
        created() {
            this.getLunBo()
            this.getInfo()
        },
        methods: {
            getLunBo() {
                this.$http.get('api/getthumimages/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        //因为轮播图子组件中循环遍历的是img属性，不是src属性，所以这里需要进行数据的相应处理

                        result.body.message.forEach(item => {
                            item.img = item.src
                        })

                        this.Lunbo = result.body.message
                    }
                })
            },
            getInfo() {
                this.$http.get('api/goods/getinfo/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        this.goodsInfo = result.body.message[0]
                    }
                })
            },
            goDesc(id) {
                this.$router.push({
                    name: "GoodsDesc",
                    params: {id}
                })
            },
            goComment(id) {
                this.$router.push({
                    name: "GoodsComment",
                    params: {id}
                })
            },
            addToCart() {
                this.ballFlag = !this.ballFlag
                const cart = {
                    id: this.id,
                    price:this.goodsInfo.sell_price,
                    num: this.countNum,
                    selected:true
                }
                this.$store.commit('addToCart',cart)


            },
            beforeEnter(el) {
                // 基于自身现在的位置不变
                el.style.transform = 'translate(0,0)'
            },
            enter(el, done) {
                const ballPosition = this.$refs.ball.getBoundingClientRect()

                const cartPosition = document.getElementById('cart').getBoundingClientRect()

                const xPos = cartPosition.left - ballPosition.left

                const yPos = cartPosition.top - ballPosition.top

                el.offsetWidth //出现动画效果
                el.style.transform = `translate(${xPos}px,${yPos}px)`
                el.style.transition = 'all 0.7s cubic-bezier(.4,-0.3,1,.68)'
                done()
            },
            afterEnter(el) {
                this.ballFlag = !this.ballFlag
            },
            getCount(num) {
                this.countNum = num
            }
        },
        components: {
            Swipe,
            Numbox
        }
    }
</script>

<style scoped lang="less">
    .goods-container {
        background-color: #eee;
        overflow: hidden;

        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            z-index: 100;
            top: 390px;
            left: 146px;
        }

        .mui-card {
            .price {
                .old {
                    text-decoration: line-through;
                }

                .sell {
                    color: red;
                    font-size: 16px;
                    font-weight: 700;
                }
            }

            .mui-card-footer {
                //因为mui的mui-card为其中的元素设置了flex布局
                // 在flex布局中br标签是不起作用的
                //如果需要中途强制换行显示，即需要取消flex布局
                display: block;

                button {
                    margin: 15px 0; //按钮的外边距，隔开按钮
                }
            }
        }
    }


</style>